<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery-3.4.1.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
        }

        html,body,.chart,.layout,.content{
            height:100%;
        }

        .display-none{
            display: none;
        }



    </style>
</head>
<body style="overflow:hidden;">
<!--最外层-->
<div class="layout container">
    <!--内容-->
    <div class="content" style="background-color: #eee;border-radius: 1em">
        <!--左侧-->
        <div id="charts" class="col-lg-3" style="background-color: white;height: 100%;border: 2px solid #eee;border-radius: 1em;">
            <!--标题-->
            <header style="margin: 20px 0">
                <span style="font-size: 20px;font-weight: 900">聊天室</span>
            </header>
            <form>
                <input type="text" class="form-control" placeholder="Search">
            </form>

            <!--聊天列表 超出隐藏-->
            <div class="dropdown" style="margin: 20px 0;padding-bottom: 13px;border-bottom: 2px solid #eee;overflow: hidden">
                <a id="comment-a" style="width: 100%;text-align: left;font-size: 18px;text-decoration: none;color: #4e555b;" href="javascript:void(0);">
                    <p style="width: 100%">
                        评论
                        <span class="badge" id="all-comment-amount" style="margin-left: 12px;background-color: #ff6000;height: 20px;line-height: 15px"></span>
                        <span class="caret" style="float: right;position: relative;top: 8px;margin-right: 8px"></span>
                    </p>
                </a>
                <ul id="comment-ul" class="list-group showing" style="margin: 12px 0;display: none">


                </ul>
            </div>


            <div>
                <span style="font-size: 18px;color: #4e555b;">聊天</span>
                <ul class="list-group" style="margin: 12px 0;">
                    <a href="" style="text-decoration: none;color: #4e555b" class="comment-single">
                        <li class="list-group-item">
                            <span class="badge" style="background-color: #ff6000;height: 20px;line-height: 15px">14</span>
                            naturx客服
                        </li>
                    </a>
                </ul>

            </div>

            <div class="p-3">
                <button class="btn btn-primary btn-block" style="background-color: #00b17d;text-decoration: none"><strong style="margin-right: 12px">+</strong>新聊天</button>
            </div>

        </div>

        <!--右侧-->
        <div class="chart col-lg-9" style="height: 100%;border-left: 2px solid #e3e3e3;position: relative;">
            <iframe src="" id="content" name="content-iframe" frameborder="0" height="10px" style="width: 100%;overflow:auto;position: absolute;top: 0;height: 100%;" onload="" ></iframe>
        </div>
    </div>

</div>
</body>
<script>

    //隐藏显示消息数量
    var isCommentUl = false;
    function commentAmount() {
        if ($('#all-comment-amount').html()==0){
            $('#all-comment-amount').css("background-color","#00b17d")
        }
    }

    $('#comment-a').click(function(){
        $('#comment-ul').slideToggle(300);
        isCommentUl = !isCommentUl;

        if(isCommentUl){
            $('#all-comment-amount').addClass("display-none");
        }else{
            $('#all-comment-amount').removeClass("display-none")
        }
    });

    //鼠标经过事件
    function mouse_hover(obj){
        $(obj).children().eq(0).css("border-color","#00b17d")
    }

    function mouse_out(obj){
        $(obj).children().eq(0).css("border-color","#ccc")
    }

    var showCommentId='';
    var chartsUrl;
    function mouse_click(obj) {

        chartsUrl = $(obj).attr("href");
        showCommentId = chartsUrl.split("=")[1];
        $(obj).children().eq(0).children().eq(0).html('');
        $.post("/message/readed?commentId="+chartsUrl.split("=")[1]);
    }

    //iframe自适应高度
    function reinitIframe(){
        var iframe = document.getElementById("content");
        iframe.height = 0; //只有先设置原来的iframe高度为0，之前的iframe高度才不会对现在的设置有影响
        try{
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.max(bHeight, dHeight);
            iframe.height = height;
        }catch (ex){}
    }
    reinitIframe();

//    var commentIdByUrl;commentIdByUrl = location.href.split("/")[url.split("/").length-1];
    //获取消息数量和来源
    function messageAlert() {


        $.ajax({
            url:"/comment/message",
            type:"post",
            success:function (data) {
                console.log(data);
                var notReadAmount = 0;
                var html = '';
                for (var i=0; i<data.length; i++){
                    var commenter = data[i].commentSenterName;
                    var messageAmount = data[i].commentMessageInfos.length;
                    for (var j=0; j<data[i].commentMessageInfos.length; j++){
                        notReadAmount++;
                    }
                    html += '<a href="http://localhost:8888/cmessage.html?commentId='+data[i].commentId+'" target="content-iframe" class="comment-single" style="text-decoration: none;color: #4e555b" onmouseover="mouse_hover(this)" onmouseout="mouse_out(this)" onclick="mouse_click(this)">';
                    html +=     '<li class="list-group-item" style="margin-bottom: 5px">';
                    html +=         '<span class="badge" style="background-color: #ff6000;height: 21px;line-height: 16px">'+messageAmount+'</span>';
                    html +=         '来自'+commenter+'的评论';
                    html +=     '</li>';
                    html += '</a>';
                }
                html += '<li style="list-style-type: none;margin: 16px 2px">';
                html +=     '<a href="javascript:void(0);" onclick="showReaded()" style="text-decoration: none;color: #4e555b"><span style="float: right;display: inline-block">查看已读</span></a>';
                html +=  '</li>';
                $('#all-comment-amount').html(notReadAmount);
                if ($('#all-comment-amount').html() == 0){
                    $('#all-comment-amount').html('');
                    var html2= '暂无未读消息';
                    html2 += '<li style="list-style-type: none;margin: 16px 2px">';
                    html2 +=     '<a href="javascript:void(0);" onclick="showReaded()" style="text-decoration: none;color: #4e555b"><span style="float: right;display: inline-block">查看已读</span></a>';
                    html2 +=  '</li>';
                    $('#comment-ul').html(html2);
                }else{
                    $('#comment-ul').html(html);
                }

            }
        })
    }
    messageAlert();

//    查看已读消息
    function showReaded() {
        $.ajax({
            url:"/comment/readedmessage",
            type:"post",
            success:function (data) {
                console.log(data);
                var html = '';
                for (var i=0; i<data.length; i++){
                    var commenter = data[i].commentSenterName;
                    var messageAmount = data[i].commentMessageInfos.length;
                    html += '<a href="http://localhost:8888/cmessage.html?commentId='+data[i].commentId+'" target="content-iframe" class="comment-single" style="text-decoration: none;color: #4e555b" onmouseover="mouse_hover(this)" onmouseout="mouse_out(this)" onclick="mouse_click(this)">';
                    html +=     '<li class="list-group-item" style="margin-bottom: 5px">';
//                    html +=         '<span class="badge" style="background-color: #ff6000;height: 21px;line-height: 16px">'+messageAmount+'</span>';
                    html +=         '来自'+commenter+'的评论';
                    html +=     '</li>';
                    html += '</a>';
                }
                html += '<li style="list-style-type: none;margin: 16px 2px">';
                html +=     '<a href="" style="text-decoration: none;color: #4e555b"><span style="float: right;display: inline-block">查看未读</span></a>';
                html +=  '</li>';
                if (data.length == 0){
                    $('#all-comment-amount').html('');
                    var html2= '暂无已读消息';
                    html2 += '<li style="list-style-type: none;margin: 16px 2px">';
                    html2 +=     '<a href="" style="text-decoration: none;color: #4e555b"><span style="float: right;display: inline-block">查看未读</span></a>';
                    html2 +=  '</li>';
                    $('#comment-ul').html(html2);
                }else{

                    $('#comment-ul').html(html);
                }

            }
        })

    }
</script>
</html>